<template>

    <el-container class="home-container">
        <!--头部-->
        <el-header>
            <div>
                <img src="../assets/logo.png"/>
                <span>电商后台管理系统</span>
            </div>
        </el-header>
        <el-container>
            <el-aside :width="collapse?'64px':'200px'">
                <div class="toggle-button" @click="toggleCollapce">|||</div>

                    <el-menu

                            :default-active="$route.path" exact
                            class="el-menu-vertical-demo"
                            @open="handleOpen"
                            @close="handleClose"
                            unique-opened
                            :collapse="collapse"
                            :collapse-transition="false"
                            :router="true"
                    >
                        <el-submenu :index="'/'+item.path" v-for="item in menuList" :key="item.id">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>{{item.authName}}</span>
                            </template>
                            <el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id">
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                    <span>{{subItem.authName}}</span>
                                </template>
                            </el-menu-item>

                        </el-submenu>
                    </el-menu>

            </el-aside>
            <el-main>
                <Breadcrumb></Breadcrumb>
                <router-view/>
            </el-main>
        </el-container>
    </el-container>

</template>

<script>
    import Breadcrumb from './Breadcrumb'
    export default {
       
        data(){
            return {
              menuList:[],
              collapse:false
            }
          
        },
        mounted(){
          this.getMenuList()
        },
        methods: {
            toggleCollapce(){
                this.collapse=!this.collapse
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            //获取所有的菜单
           async getMenuList(){
               const {data:res} = await this.$http.get("menus")
               if(res.meta.status!==200){
                   return this.$message.error(res.meta.msg)
               }else{
                   this.menuList=res.data
               }
            }

        },
        components:{
            Breadcrumb
        }
    }
</script>

<style lang="less" scoped>
.toggle-button{

    font-size: 10px;
    line-height: 24px;
    color:#fff;
    text-align: center;
    letter-spacing: .2em;
    cursor:pointer;
}
    .home-container {
        height: 100%;
    }

    .el-header {
        display: flex;
        justify-content: space-between;
        img{
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }
    }

    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
       
       
    }

    body > .el-container {
        margin-bottom: 40px;

    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>